<template>
  <div class="conversation-item">
    <el-container class="conversation-item-wrapper">
      <el-aside class="conversation-aside" width="270px">
        <ConversationSidebar />
      </el-aside>
      <el-container class="conversation-current-wrapper">
        <CurrentConversation />
      </el-container>
      <VideoCallItem class="video-call"/>
    </el-container>
  </div>
</template>

<script>
import ConversationSidebar from '../conversation/ConversationSidebar.vue';
import CurrentConversation from '../conversation/CurrentConversation.vue';
import VideoCallItem from '../trtc/VideoCallItem.vue';

export default {
  name: "conversation-item",
  components:{
    ConversationSidebar,
    CurrentConversation,
    VideoCallItem
  }
};
</script>

<style scoped>
.conversation-item {
  height: 100%;
  display: flex;
  justify-content: center;
}
.conversation-item-wrapper{
  position: relative;
  max-width: 1440px;
  margin: 80px 80px 40px 80px;
  overflow: hidden;
}
.conversation-aside {
  background-color: gray;
}
.video-call{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index:999;
}
</style>